<template>
  <div class="content-view">
    <div class="table-head-tool">
      <Button type="primary" @click="showAddWarp">新增</Button>

      <Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
        <FormItem :label-width="20" class="flex">
          <Select v-model="gridOption.param.seachOption.key" style="width: 120px" :placeholder="seachTypePlaceholder">
            <Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
          </Select>
          <Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search placeholder="请输入关键字" @on-search="query(1)" />
        </FormItem>

        <FormItem>
          <Button type="default" @click="exportCsv">导出</Button>
        </FormItem>
      </Form>
    </div>
    <div class="table-body">
      <tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption" @changePage="query"></tables>
    </div>
    <editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
  </div>
</template>
<script>
  import funTool from '@/libs/funTool'
  import uiTool from '@/libs/uiTool'
  import modelServer from '@/api/system_high/modelServer.js'
  import <%=fileName%>Server from '@/api/<%=api_path%>'

  export default {
    data() {
      let rules = {}
      <%columns.forEach(p=>{%>
      <%if(p.data_type==="DOUBLE"||p.data_type==="INTEGER") {%>rules["<%=p.key%>"]=[{ required: true,type:"number", message: '请选择<%=p.name%>', trigger: 'change' }];<%}
      else if(p.control.comType==="Select"||p.control.comType==="Radio"||p.control.comType==="Checkbox") {%>
      rules["<%=p.key%>"]=[{ required: true, message: '请选择<%=p.name%>', trigger: 'change', }]<%}
      else if(p.name.indexOf("图")>-1){%>
      rules["<%=p.key%>"]=[{ required: true, message: '请上传<%=p.name%>', trigger: 'change' }] <%}
      else if(p.data_type==="BOOLEAN"){%>
        rules["<%=p.key%>"]=[{ required: true,type:'boolean', message: '请选择<%=p.name%>', trigger: 'change' }]   <%}
      else{%>rules["<%=p.key%>"]=[{ required: true, message: '请填写<%=p.name%>'}];<%}%> <%})%>
      return {
        seachTypes:[
           <%columns.filter(p=>p.is_show_seach===1).forEach(p=>{%> {key:"<%=p.key%>",value:"<%=p.name%>"},<%})%>
        ],
        gridOption: {
          param: {
            seachOption:{key:"",value:""},
            pageOption:{
              total: 0,
              page: 1,
              pageSize: 20
             }
          },
          rules,
          columns:[
            {key:'id',title:'id',width:'80px',is_show_edit:0},
            <%columns.forEach(p=>{%>
            <%if(p.control.comType==="Select"||p.control.comType==="Radio"||p.control.comType==="Checkbox"){%>{ key: "<%=p.key%>",title:"<%=p.name%>",
            com:"<%=p.control.comType%>",
            source:[<%p.source.forEach(row=>{%>{key:<%=row.key%>,value:"<%=row.value%>"}, <%})%>] ,render:(h,params)=>{
                let row=params.column.source.find(p=>(p.key)==params.row['<%=p.key%>'] )
                if(row){ return <span>{row.value}</span>}else { return <span>-</span> }
              },
            disabled:  <%=p.is_edit_disable?true:false%>,
            is_show_edit:<%=p.is_show_edit%>,
            is_show_list:<%=p.is_show_list%>,
            defaultVal:'<%=p.default_value%>',
            },
           <%}else if(p.control.comType==='UploadSingle'){%>{ key: "<%=p.key%>",title:"<%=p.name%>",com:"<%=p.control.comType%>",    disabled:  <%=p.is_edit_disable?true:false%>,  is_show_edit:<%=p.is_show_edit%>,is_show_list:<%=p.is_show_list%>,
            render:(h,params)=>{ return <img src={params.row['<%=p.key%>']} style={{ width: '100px', height: '100px' }} />} },
           <%}else if(p.control.comType){%>{ key: "<%=p.key%>",title:"<%=p.name%>",disabled:  <%=p.is_edit_disable?true:false%>,is_show_edit:<%=p.is_show_edit%>,is_show_list:<%=p.is_show_list%>%>, <%if(p.data_type==="DOUBLE"||p.data_type==="INTEGER") {%>data_type:"number",<%} else if(p.data_type==="BOOLEAN"){%>data_type:"boolean",<%}%>  com:"<%=p.control.comType%>" },<%} else {%>{ key: "<%=p.key%>",title:"<%=p.name%>", is_show_edit:<%=p.is_show_edit%>,is_show_list:<%=p.is_show_list%>,disabled:  <%=p.is_edit_disable?true:false%> }, <%}%><%})%>
           {key:'created_date',title:'创建时间',width:'100px',is_show_edit:0 },
           {key:'updated_date',title:'更新时间',width:'100px',is_show_edit:0 },
           {
              title: '操作',
              key: 'action',
              width:'200px',
              type: 'template',
              render: (h, params) => {
                let btns = [
                  {
                    title: '修改',
                    type: 'primary',
                    click: () => {
                      this.showEditWarp(params.row)
                    },
                  },
                  {
                    title: '删除',
                    type: 'primary',
                    click: () => {
                      this.delConfirm(params.row)
                    },
                  },
                ]

                return uiTool.getBtn(h, btns)
              },
            },],
          data: []
        },
      }
    },
    computed:{
      seachTypePlaceholder(){
        return  this.seachTypes.map(p=>p.value).slice(0,3).join('/')
      },
      editColumns(){
         let editTempColumns=  this.gridOption.columns.filter(p=>p.is_show_edit===1)
         return editTempColumns
      },
      listColumns(){
         let listTempColumns=  this.gridOption.columns.filter(p=>p.is_show_list!==0)
         return listTempColumns
      }
    },

    mounted() {
      this.init()
      this.initCol()
    },
    methods: {
      init() {
        this.query(1)
      },
     async initCol(){
       <%if(columns&&columns.length>0){%>
          let columnRows=[<%columns.forEach(p=>{%> <%if(p.control.interfaceType ==='接口'){%> {key:'<%=p.key%>',modelKey:"<%=p.control.modelKey%>",map_option:{key:"<%=p.control.modelMap.key%>",value:"<%=p.control.modelMap.value%>"}},<%}%><%})%>]
          let columnKeys=columnRows.map(p=>p.key)
          let newColumns=this.gridOption.columns.filter(p=>columnKeys.indexOf(p.key) >-1)
            for(let i=0;i<newColumns.length;i++){
              let curColumn =newColumns[i]
              let modelMap=columnRows[i].map_option
              let res=await modelServer.interface({model_key:columnRows[i].modelKey,map_option:modelMap})
              curColumn.source=res.data
            }
       <%}%>
      },

       async inquiry() {
        let res = await <%=fileName%>Server.all(this.gridOption.param)
        this.gridOption.data = res.data
      },

      async query(page){
        if (page) {
          this.gridOption.param.pageOption.page = page
        }

        let res = await <%=fileName%>Server.page(this.gridOption.param)
         this.gridOption.data = res.data.rows
        this.gridOption.param.pageOption.total = res.data.count

      },
      async showAddWarp() {
        this.$refs.editModal.addShow({<%columns.filter(p=>(p.default_value||p.default_value===0)).forEach(p=>{%>'<%=p.key%>':'<%=p.default_value%>',<%})%> }, async (newRow) => {
          let res = await <%=fileName%>Server.add(newRow)
          rootVue.$Message.success('新增成功！')
          this.init()
        })
      },
     async showEditWarp(row) {
        this.$refs.editModal.editShow(row, async (newRow) => {
          let valid = await this.$refs['editModal'].$refs['From'].validate()
          if (valid) {
            let res = await <%=fileName%>Server.edit(newRow)
            rootVue.$Message.success('修改成功！')
            this.init()
          }
        })
      },

     async delConfirm(row){
        uiTool.delConfirm(async () => {
                await <%=fileName%>Server.del(row)
                rootVue.$Message.success('删除成功！')
                this.init()
        })
      },

     async exportCsv(row){
        await <%=fileName%>Server.exportCsv(row)
      }
    },
  }
</script>

<style lang="less"></style>
